<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="false"><block slot="backText">back</block><block slot="content">Home</block></cu-custom>
	<view
		v-for="(item, index) in wordList" :key="index"
		class="guess-item"
		@click="navToDetailPage(item)"
	>
		<view class="cu-card case" :class="isCard?'no-card':''" >
			<view class="cu-item shadow">
				<view class="image">
					<view class="flex align-center bg-gradual-red" style="height: 210upx;">
						<view class="padding-xl text-white" v-if="item.wlist!=''">
							<view class="padding-xs text-xxl text-bold" >
								 {{item.wlist[0].name}}
							</view>
							<view class="padding-xd  text-lg" >
								{{item.wlist[0].explain}}
							</view>
						</view>
						
						<view class="padding-xl text-white" v-else>
							<view class="padding-xs text-xxl text-bold" >
								 还没有单词
							</view>
							<view class="padding-xd  text-lg" >
								点击开始添加吧...
							</view>
						</view>
						
						
					</view>
					
					
					<view class="cu-tag bg-blue" v-if="item.completeNumber==item.wordsNumber">小有成就</view>
					<view class="cu-tag bg-yellow" v-else-if="item.completeNumber>0" >继续努力</view>
					<view class="cu-tag bg-red" v-else >全新开始</view>
					</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
						<view class="content flex-sub">
							<view class="text-grey">{{item.name}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{item.wordsNumber}} terms
								<view class="text-gray text-sm">
									<text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.viewNumber}}
									<text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.completeNumber}}
									<!-- <text class="cuIcon-messagefill margin-lr-xs"></text> 0 -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>	
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: false,
				wordList:[]
			};
		},
		mounted() {
			this.loadData();
			
		},
		
		methods: {
			IsCard(e) {
				this.isCard = e.detail.value
				
			},
			navToDetailPage(item){
				let cid = item._id;
				//console.log(">>>"+cid);
				uni.navigateTo({
					url: `/pages/home/wordslist?cid=${cid}`
				})
			},
			
			loadData() {
					//获取数据
				
					uni.request({
					    url: this.urlDataAsync+ "word/getc/5e6e54c4d146361ef4848422", //仅为示例，并非真实接口地址。
					    data: {},
						header: {
						          'content-type': 'application/json', // 微信默认就是
						        },
						success: (res) =>  {
							//
						   // console.log(">>>>"+JSON.stringify(res.data));
						   if(res.data.result.count>0){
							   this.wordList=res.data.result.list;
						   }
							
							
//							console.log(JSON.stringify(this.wordList));
								
						    }
					});
					
			},
		}
	}
</script>

<style>
.padding-xs {
    padding: 0upx;
	padding-left: 50upx;
}
.padding-xl {
    padding: 0upx;
	padding-left: 50upx;
}
.padding-xd {
    
	padding-left: 80upx;
}
</style>
